<template>
  <div style="display: flex;justify-content: center;color: red;font-size: 50px;">todos</div>
  <div style="display: flex;flex-direction: row;">
    <el-input v-model="input" style="width: 240px" placeholder="请填写任务" />
    <el-button type="success" style="margin-left: 20px;" @click="enter">增加</el-button>
  </div>
  <el-table :data="tableData" empty-text style="width: 100%" @cell-mouse-enter="mouseEnterOnRow"
    @cell-mouse-leave="mouseLeaveOnRow">
    <el-table-column width="100px">
      <template #default="scope">
        <el-checkbox v-model="scope.row.state" size="large" />
      </template>
    </el-table-column>
    <el-table-column width="180">
      <template #default="scope">
        <span :style="{ 'text-decoration': scope.row.state ? 'line-through' : '' }">{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="scope">
        <el-button v-if="scope.row.buttonShow" type="danger" :icon="Delete" circle @click="del(scope.$index)" />
      </template>
    </el-table-column>
  </el-table>
  <div style="display: flex;flex-direction: row-reverse; margin-top: 20px;">
    <el-button type="danger" style="margin-left: 10px;" @click="tableType(2)">未完成</el-button>
    <el-button type="primary" @click="tableType(1)">已完成</el-button>
    <el-button type="success" @click="tableType(0)">全部任务</el-button>
  </div>
</template>
<script setup>
import { ref, toRaw } from 'vue'
import { Delete } from '@element-plus/icons-vue'

const input = ref('')
const falseList = ref([])
const trueList = ref([])
const allList = ref([
  {
    id: 0,
    content: '2016-05-03',
    state: false,
    buttonShow: false,
  }
])
const tableData = ref(allList.value)

const tableType = (type) => {
  falseList.value.length = 0
  trueList.value.length = 0
  for (let i = 0; i < allList.value.length; i++) {
    if (allList.value[i].state) {
      trueList.value.push(allList.value[i])
    } else {
      falseList.value.push(allList.value[i])
    }
  }
  if (type == 0) {
    tableData.value = allList.value
  } else if (type == 1) {
    tableData.value = trueList.value
  } else {
    tableData.value = falseList.value
  }
}
const mouseEnterOnRow = (row) => {
  row.buttonShow = true
}
const mouseLeaveOnRow = (row) => {
  row.buttonShow = false
}
const del = (index) => {
  if (tableData.value == trueList.value) {
    let allListIndex = allList.value.map((item) => item.id).indexOf(trueList.value[index].id);
    allList.value.splice(allListIndex, 1)
    trueList.value.splice(index, 1)
  } else if (tableData.value == falseList.value) {
    let allListIndex = allList.value.map((item) => item.id).indexOf(falseList.value[index].id);
    allList.value.splice(allListIndex, 1)
    falseList.value.splice(index, 1)
  } else {
    allList.value.splice(index, 1)
  }
}
const enter = () => {
  allList.value.push({
    id: allList.value.length == 0 ? 0 : allList.value[allList.value.length - 1].id + 1,
    content: input.value,
    state: false,
    buttonShow: false,
  })
  if (tableData.value == falseList.value) {
    tableType(2)
  }
  
}



</script>
<style></style>